<template>
	<view>
		<u-navbar title="修改对公账户信息" :autoBack="true" :placeholder="true" leftIconColor="#ffffff" :titleStyle="{color: '#ffffff'}" bgColor="#e60000" class="navBarHeight" />
		<view class="padding-lr padding-bottom margin radius-10 text-black0 font-12 bg-white">
			<view class="flex align-center item-bg radius-6">
				<view class="text-bold margin-right label-w">收款方信息</view>
				<view class="flex-grow">
					<input class="font-14" placeholder="请输入收款方信息" v-model="centerInfo.title" />
				</view>
			</view>
			<view class="flex align-center item-bg radius-6">
				<view class="text-bold margin-right label-w">银行卡号</view>
				<view class="flex-grow">
					<input class="font-14" type="number" placeholder="请输入银行卡号" maxlength="18" v-model="centerInfo.number" />
				</view>
			</view>
			<view class="flex align-center item-bg radius-6">
				<view class="text-bold margin-right label-w">银行卡开户信息</view>
				<view class="flex-grow">
					<input class="font-14" placeholder="请输入银行卡开户信息" v-model="centerInfo.details" />
				</view>
			</view>

			<view class="bg-white w-100 border-box boxContent m-t-10">
				<view class="font-14 font-b">收款二维码</view>
				<view class="flex">
				<u-upload class="m-t-20 " :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="1" />
				</view>
				<view class="font-12 color-gray m-t-20">请上传清晰完整的收款二维码</view>
			</view>

			<view class="btn" @click="submit">确定</view>
		</view>

	</view>
</template>

<script>
	import { editeInfo, getFindCenterInfo } from '@/common/api/serviceCenter.js'
	import { uploadFile } from '@/common/utils/uploadImg.js'
	export default {
		data() {
			return {
				centerInfo:{},
				fileList1:[],
			};
		},
		onShow() {
			this.getCenterInfo()
		},
		methods: {
			//获取服务中心信息
			getCenterInfo(){
				getFindCenterInfo().then(res => {
					if(res.code === 200){
						this.centerInfo = res.data
						this.fileList1 = [{url:res.data.picture}]
					}
				})
			},
			// 删除图片
			deletePic(event) {
				this.fileList1 = []
				this.centerInfo.picture = [];
			},
			// 新增图片
			async afterRead(event) {
				const result = await this.uploadFilePromise(event.file[0].url)
				if(result.data){
					this.fileList1 = [{url: result.data}];
					this.centerInfo.picture = result.data;
				}
			},
			uploadFilePromise(file) {
				return new Promise((resolve, reject) => {
					let res = uploadFile(file, 9)
					resolve(res)
				})
			},
			// 修改信息
			submit() {
				if (!this.centerInfo.title) {
					return this.$msg('请输入收款方信息')
				}
				if (!this.centerInfo.number) {
					return this.$msg('请输入银行卡号')
				}
				if(!this.centerInfo.details) {
					return this.$msg('请输入银行卡开户信息')
				}
				if(this.centerInfo.picture.length == 0){
					return this.$msg('请上传收款二维码')
				}
				uni.showLoading({
					title: '修改中',
					mask: false
				})
				editeInfo(this.centerInfo).then(res => {
					uni.hideLoading()
					if (res.code == 200) {
						this.$msg('修改成功')
						this.getCenterInfo()
						setTimeout(() => {
							uni.navigateBack()
						},1500)
					} else {
						this.$msg(res.msg)
					}
				}).catch(err=> {
					uni.hideLoading()
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	::v-deep .uni-input-placeholder {
		font-size: 24rpx !important;
	}

	.label-w {
		width: 170rpx;
	}

	.item-bg {
		padding: 24rpx 0;
		border-bottom: 2rpx solid #f5f5f5;
	}

	.icon-size {
		width: 36rpx;
		height: 36rpx;
		margin-right: 20rpx;
	}

	.btn {
		width: 100%;
		height: 84rpx;
		margin: 60rpx auto 30rpx auto;
		border-radius: 12rpx;
		background: #e60000;
		font-size: 24rpx;
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
